<template>
  <van-popup :show="show" :position="position" :round="round" destroy-on-close>
    <van-picker
      :title="title"
      :columns="columns"
      :model-value="modelValue"
      @cancel="onCancel"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script lang="ts" setup>
interface Props {
  show: boolean
  title?: string
  position?: 'top' | 'bottom' | 'left' | 'right'
  round?: boolean
  modelValue?: any[]
  columns: { text: string; value: any }[]
  seedingIndex?: number
}

const props = withDefaults(defineProps<Props>(), {
  position: 'bottom',
  round: true,
  title: '',
  modelValue: () => [],
  seedingIndex: 0
})

const emit = defineEmits<{
  (e: 'update:show', value: boolean): void
  (e: 'confirm', value: object, index: number): void
  (e: 'cancel'): void
}>()

// 取消选择
const onCancel = () => {
  emit('update:show', false)
  emit('cancel')
}

// 确认选择
const onConfirm = (selectedValues: any[]) => {
  emit('update:show', false)
  emit('confirm', selectedValues, props.seedingIndex)
}
</script>

<style lang="scss" scoped>
:deep(.van-picker__cancel) {
  color: #666666;
  font-size: 16px;
  font-weight: 400;
}
:deep(.van-picker__confirm) {
  color: #32bc05;
  font-size: 16px;
  font-weight: 400;
}
:deep(.van-picker__title) {
  color: #222;
  font-size: 16px;
  font-weight: 400;
}
:deep(.van-picker-column__item) {
  margin: 0 12px;
  color: #666;
  font-size: 15px;
  font-weight: 400;
}

:deep(.van-picker-column__item--selected) {
  font-size: 16px;
  color: #222;
}

:deep(.van-picker__toolbar) {
  border: none !important;
}

:deep(.van-picker__frame) {
  border-radius: 25px;
  background: rgba(138, 135, 135, 0.1);
  &::after {
    border: none;
  }
}
</style>
